<!doctype html>
<html lang="zxx">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <title>购物车</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>


<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>


<div class="modal fade cart-shit" id="exampleModal-cart" tabindex="-1" aria-hidden="true">
    <div class="cart-shit-wrap">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close-btn" data-bs-dismiss="modal">
                        <i class="ri-close-fill"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="cart-list">
                        <li>
                            <img src="/picture/product-1.jpg" alt="Image">
                            <a href="">
                                DFMALB 20V Max XX Oscillating Multi Tool Variable Speed Tool
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-2.jpg" alt="Image">
                            <a href="">
                                Power Tools Set Chinese Manufacturer Production 50V Lithu Battery
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-3.jpg" alt="Image">
                            <a href="">
                                Electrical Magnetic Impact Power Hammer Drills Machine
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-4.jpg" alt="Image">
                            <a href="">
                                Professional Cordless Drill Power Tools Set Competitive Price
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                    </ul>
                    <ul class="payable">
                        <li>
                            Payable total
                        </li>
                        <li class="total">
                            <span>$564.00</span>
                        </li>
                    </ul>
                    <ul class="cart-check-btn">
                        <li>
                            <a href="" class="default-btn">
                                View Cart
                            </a>
                        </li>
                        <li class="checkout">
                            <a href="checkout.html" class="default-btn">
                                Checkout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <ul>
                <li>
                    <a href="/page/index">
                        首页
                    </a>
                </li>
                <li class="active">购物车</li>
            </ul>
        </div>
    </div>
</div>


<section class="cart-area ptb-54">
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <form class="cart-controller">
                    <div class="cart-table table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">选择</th>
                                <th scope="col">商品图</th>
                                <th scope="col">商品名</th>
                                <th scope="col">价格</th>
                                <th scope="col">数量</th>
                                <th scope="col">总价</th>
                                <th scope="col">删除</th>
                            </tr>
                            </thead>
                            <tbody id="productlist">
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="col-lg-3">
                <div class="cart-totals">
                    <h3 class="cart-checkout-title">合计</h3>
                    <ul>
                        <li>总价 <span type="sum">0</span></li>
                    </ul>
                    <a href="" class="default-btn" name="checkoutcart">
                        确认购买
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>


<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>


<script src="/js/jquery.min.js"></script>

<script src="/js/bootstrap.bundle.min.js"></script>

<script src="/js/meanmenu.min.js"></script>

<script src="/js/owl.carousel.min.js"></script>

<script src="/js/wow.min.js"></script>

<script src="/js/range-slider.min.js"></script>

<script src="/js/form-validator.min.js"></script>

<script src="/js/contact-form-script.js"></script>

<script src="/js/ajaxchimp.min.js"></script>

<script src="/js/custom.js"></script>
<script src="/layui/layui.all.js"></script>
<script id="cartitem" type="text/html">
 <tr>
     <td class="product-select">
         <label>
             <input type="checkbox" class="item-checkbox" name="cart-item">
         </label>
     </td>
  <td class="product-thumbnail">
   <a href="product-details.html">
    <img src="" alt="Image" type="productimg"/>
   </a>
  </td>
  <td class="product-name">
   <a href="product-details.html" type="productname">商品名 </a>
  </td>
  <td class="product-price">
   <span class="unit-amount" type="productprice">商品价格</span>
  </td>
  <td class="product-quantity">
   <div class="input-counter" type="">
    <span class="minus-btn" >
     <i class="ri-subtract-line"></i>
    </span>
    <input type="text" id="productnumber" value="">
    <span class="plus-btn" type="">
     <i class="ri-add-line"></i>
    </span>
   </div>
  </td>
  <td class="product-subtotal">
   <span class="subtotal-amount" type="singlesumprice">总价</span>
  </td>
  <td class="trash">
   <a href="" class="remove">
    <i class="ri-close-fill"></i>
   </a>
  </td>
 </tr>
</script>

<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script>
     const userID= parseInt($('#userId').val(),10);
     function loadlist (){
         $.ajax({
             url:'/cart/getcartData',
             data:{userid:userID},
             async:false,
             success:function(result){
                 let sum=0;
                 for (let i=0;i<result.length;i++){
                     let item = $("#cartitem").text();
                     const $item =$(item);
                     $item.find('[type=productimg]').attr('src','/'+result[i].product.defaultimg);
                     $item.find('.input-counter').attr('type',result[i].productid);
                     $item.find('[type=productname]').text(result[i].product.name);
                     $item.find('[type=productprice]').text(result[i].product.price);
                     $item.find('#productnumber').attr('value',result[i].number);
                     $item.find('[type=singlesumprice]').text(result[i].number*result[i].product.price);
                     $("#productlist").append($item);
                 }
             }
         })
     }
     loadlist();

     $(".minus-btn").on('click',function(){
         const $row = $(this).closest('tr');
         let productid=$row.find(".input-counter").attr('type');
         let $this=(this).parent;
         $.ajax({
             url:'/cart/delete',
             data:{productid:productid,userid:userID},
             async: false,
             success:function(){
                 const $numberInput = $row.find('#productnumber');
                 const newNumber = parseInt($numberInput.val()) - 1;
                 console.log(newNumber);
                 const $sumprice=$("[type=sum]");
                 if(newNumber>0){
                     $numberInput.val(newNumber);  // 更新数量显示
                     const price = parseFloat($row.find('[type="productprice"]').text());
                     $row.find('[type="singlesumprice"]').text(price * newNumber);  // 更新单品总价
                     // let tem=parseInt($sumprice.text());
                     // $sumprice.text(tem-price);
                     updateTotalSum();
                 }else{
                     let tem=parseInt($sumprice.text());
                     const price = parseFloat($row.find('[type="productprice"]').text());
                     $sumprice.text(tem-price);
                     $row.remove();
                 }
             }
         })
     })

     $(".plus-btn").on('click',function(){
         const $row = $(this).closest('tr');
         let productid=$row.find(".input-counter").attr('type');
         $.ajax({
             url:'/cart/add',
             data:{productid:productid,userid:userID},
             async: false,
             success:function(){
                 const $numberInput = $row.find('#productnumber');
                 const newNumber = parseInt($numberInput.val()) + 1;
                 $numberInput.val(newNumber);  // 更新数量显示
                 const price = parseFloat($row.find('[type="productprice"]').text());
                 $row.find('[type="singlesumprice"]').text(price * newNumber);  // 更新单品总价
                 // const $sumprice=$("[type=sum]");
                 // let tem=parseInt($sumprice.text());
                 // $sumprice.text(tem+price);
                 updateTotalSum();
             }
         })
     })

     $(".remove").on('click',function(){
         const $row = $(this).closest('tr');
         let productid=$row.find(".input-counter").attr('type');
         $.ajax({
             url:'/cart/drop',
             data:{productid:productid,userid:userID},
             async: false,
             success:function(){
                 $row.remove();
             }
         })
     })

     //计算总价
     function updateTotalSum() {
         let sum = 0;
         $('.item-checkbox:checked').each(function() {
             const $row = $(this).closest('tr');
             const price = parseFloat($row.find('[type="productprice"]').text());
             const quantity = parseInt($row.find('#productnumber').val());
             sum += price * quantity;
         });
         $("[type=sum]").text(sum);
     }

     $(document).on('change', '.item-checkbox', function() {
         updateTotalSum();
     });

     $("[name=checkoutcart]").on('click', function() {
         let productid="";
         let number="";
         $('.item-checkbox:checked').each(function() {
             const $row = $(this).closest('tr');
             let pid=$row.find('.input-counter').attr('type');
             let num=$row.find('#productnumber').val();
             productid+=(pid+",");
             number+=(num+",");
         });
         productid=productid.substring(0,productid.length-1);
         number=number.substring(0,number.length-1);
         $('[name=checkoutcart]').attr('href','http://localhost:8080/page/check?productid='+productid+"&number="+number);
         $.ajax({
             url: '/page/check',
             data: data,
             success: function(response) {

             },
         });
     });

</script>
<script>
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $item.find("a").attr('href','/page/categoryproducts?pid='+result[i].id);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>